<template>
	<view class="body-content">
		<!-- 基本订单信息 -->
		<view class="header-info">
			<p :class="order.schedule == '已完成'?'done':'marking'">{{order.schedule}}</p>
			<h1>{{order.trackingNumber}}</h1>
			<h4>取单号</h4>
			<u-button type="primary" :plain="true" :hairline="true" text="申请开票"></u-button>
		</view>
		<!-- 经验成长 -->
		<view class="experiential-growth">
			<view class="left-area">
				<view class="one-row">
					<u-icon name="integral" color="#2979ff" size="40"></u-icon>
					<text>经验值</text>
					<p>+20</p>
				</view>
			</view>
			<view class="right-area">
				<view class="one-row">
					<u-icon name="coupon" color="#2979ff" size="40"></u-icon>
					<text>积分</text>
					<p>+20</p>
				</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="shop-content">
			<!-- 标题 -->
			<view class="title-area">
				<p>{{order.shopName}}</p>
				<view class="chat-area">
					<u-icon class="icon-btn" name="phone" color="#2979ff" size="50"></u-icon>
					<u-icon class="icon-btn" name="map" color="#2979ff" size="50"></u-icon>
				</view>
			</view>
			<!-- 商品 -->
			<view class="product-area">
				<view class="product-list" v-for="(product, index) in order.products" :key="index">
					<view class="left-field">
						<image :src="product.cover"></image>
						<view class="item-title">
							<h4>{{product.productName}}</h4>
							<view class="remark-area">
								<p class="buy-capacity">{{product.capacity}}</p>,
								<p class="buy-ice">{{product.ice}}</p>,
								<p class="buy-sugar">{{product.sugar}}</p>
							</view>
						</view>
					</view>
					<!-- 购买信息 -->
					<view class="buy-detail">
						<view class="buy-price">￥{{allPrice(product.price, product.number)}}</view>
						<view class="buy-number">共{{product.number}}件</view>
					</view>
				</view>
			</view>
			<!-- 全部价钱 -->
			<view class="all-price">
				<text style="font-size: 26rpx;">共</text><text style="font-size: 20rpx;">￥</text><text
					style="font-size: 30rpx;">{{sumPrice}}</text>
			</view>
		</view>
		<!-- 用餐信息 -->
		<view class="dining-information">
			<h4>用餐信息</h4>
			<view class="phone">
				<text>预留电话</text>
				<text>{{order.phone}}</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-information">
			<h4>订单信息</h4>
			<view class="row-data">
				<text>订单编号</text>
				<text>{{orderInformation.id}}</text>
			</view>
			<view class="row-data">
				<text>下单时间</text>
				<text>{{orderInformation.createTime}}</text>
			</view>
			<view class="row-data">
				<text>支付方式</text>
				<text>{{orderInformation.payment}}</text>
			</view>
			<view class="row-data">
				<text>支付金额</text>
				<text>{{orderInformation.payment}}￥{{orderInformation.allPrice}}</text>
			</view>
			<view class="row-data">
				<text>备注信息</text>
				<text>{{orderInformation.remark}}</text>
			</view>
		</view>
		<view style="text-align: center;margin: 30rpx 0;color: #a8a8a8;font-size: 24rpx;">如有疑问，请联系店员或致电门店</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInformation: {
					id: 'D163618372138127391793',
					createTime: '2024-7-14 18:31:15',
					payment: '微信支付',
					allPrice: '40',
					remark: '无',
				}, // 订单信息栏
				order: {}, // 订单
				orderId: '', // 订单id
				orderList: [{
					trackingNumber: 'A0001',
					type: '打包',
					shopName: '广东广州天河花城汇店',
					schedule: '制作中',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 2,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}, {
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 2,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}, {
					trackingNumber: 'A0002',
					type: '自取',
					shopName: '广东广州天河花城汇店',
					schedule: '已完成',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 1,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}, {
					trackingNumber: 'A0003',
					type: '打包',
					shopName: '广东广州天河花城汇店',
					schedule: '已完成',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 1,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}],
			};
		},
		onLoad(query) {
			this.orderId = query.id
			this.order = this.orderList[this.orderId]
			this.order.phone = '13138505721'
		},
		methods: {
			// 总价格
			allPrice(price, number) {
				return price * number
			},
		},
		computed: {
			sumPrice() {
				let result = 0
				this.order.products.forEach(item => {
					result += Number(item.price) * item.number
				})
				return result
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body-content {
		background-color: #f0f0f0;
		padding: 20rpx 20rpx;

		.header-info {
			background-color: white;
			text-align: center;
			padding: 20rpx 250rpx;
			margin: 20rpx 0;
			border-radius: 10rpx;

			p:nth-child(1) {
				font-weight: bold;
				font-size: 36rpx;
				// color: #555555;
			}

			h1 {
				margin: 15rpx 0;
			}

			h4 {
				font-weight: normal;
				color: #787878;
				margin-bottom: 20rpx;
			}
		}

		.experiential-growth {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			margin: 20rpx 0;
			border-radius: 10rpx;

			.left-area {
				width: 98%;
				margin: 20rpx 0;
				text-align: center;
				border-right: 1px solid silver;

				.one-row {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					margin-top: 10rpx;

					text {
						margin-left: 10rpx;
					}

					p {
						margin-top: 10rpx;
						display: block;
						flex: 0 0 100%;
						color: #2979ff;
						font-weight: bolder;
					}
				}
			}

			.right-area {
				width: 98%;
				border-radius: 10rpx;
				text-align: center;

				.one-row {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					margin-top: 10rpx;

					text {
						margin-left: 10rpx;
					}

					p {
						margin-top: 10rpx;
						display: block;
						flex: 0 0 100%;
						color: #2979ff;
						font-weight: bolder;
					}
				}
			}
		}

		.shop-content {
			background-color: white;
			border-radius: 10rpx;
			padding: 20rpx 15rpx;

			.title-area {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 15rpx 20rpx 15rpx;
				border-bottom: 1px solid #f6f6f6;

				p {
					font-weight: bold;
				}

				.chat-area {
					display: flex;
					align-items: center;
					justify-content: space-around;
					text-align: center;

					.icon-btn {
						width: 80rpx;
						background-color: #f4f4f4;
						height: 80rpx;
						border-radius: 80rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						margin-left: 15rpx;
					}
				}
			}

			.product-area {
				padding: 20rpx 15rpx;
				border-bottom: 1px solid #f6f6f6;

				.product-list {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.left-field {
						display: flex;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}

						.item-title {
							.remark-area {
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								font-size: 22rpx;
								color: #a8a8a8;
							}
						}
					}


					.buy-detail {
						height: 100%;
						margin-left: auto;
						text-align: right;

						.buy-price {
							font-weight: 500;
							font-size: 28rpx;
						}

						.buy-number {
							font-size: 24rpx;
							color: #a8a8a8;
						}
					}
				}
			}

			.all-price {
				text-align: right;
				padding: 20rpx 0;
			}
		}

		.dining-information {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: white;

			h4 {
				padding-bottom: 10rpx;
				border-bottom: 1px solid #f6f6f6;
				// border-bottom: 1px solid red;
			}

			.phone {
				margin-top: 15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #a8a8a8;
			}
		}

		.order-information {
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: white;
			margin-top: 20rpx;

			h4 {
				padding-bottom: 10rpx;
				border-bottom: 1px solid #f6f6f6;
				// border-bottom: 1px solid red;
			}

			.row-data {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					color: #a8a8a8;
					font-size: 24rpx;
					margin: 10rpx 0;
				}
			}
		}
	}

	.marking {
		color: #db3020;
	}

	.done {
		color: #0f559f;
	}
</style>